<template>
	<view class="container">
		<u-image :src="url" width="690rpx" height="250rpx"></u-image>
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="园区选择" prop="areaName">
				<u-input type="select" placeholder="请选择园区" v-model="form.areaName" @click="areaShow = true"/>
			</u-form-item>
			<u-form-item label="姓名" prop="name">
				<u-input placeholder="请填写宝宝姓名" v-model="form.name"/>
			</u-form-item>
			<u-form-item label="手机号码" prop="phone">
				<u-input placeholder="请填写手机号码" v-model="form.phone"/>
			</u-form-item>
			<u-form-item label="出生日期" prop="birthday" >
				<u-input type="select" placeholder="请选择宝宝出生日期" v-model="form.birthday" @click="timeShow = true"/>
			</u-form-item>
			<u-form-item label="性别" prop="gender">
				<u-radio-group v-model="form.gender">
					<u-radio v-for="(item, index) in radioList" :key="index" :name="item.value">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="家长姓名" prop="parentName">
				<u-input placeholder="请填写家长姓名" v-model="form.parentName"/>
			</u-form-item>
			<u-form-item label="与宝宝关系" prop="relation">
				<u-input type="select" placeholder="请选择与宝宝关系" v-model="form.relation" @click="relationShow = true"/>
			</u-form-item>
			<u-form-item label="家庭住址" prop="address">
				<u-input placeholder="请填写家庭住址" v-model="form.address"/>
			</u-form-item>
			<u-button class="action-view" @click="saveClick">保存</u-button>
		</u-form>
		<u-picker v-model="timeShow" mode="time" :params="params" @confirm="confirmTime"></u-picker>
		<u-select :list="areaList" v-model="areaShow" label-name="name" @confirm="areaClick"></u-select>
		<u-select :list="relationList" v-model="relationShow" label-name="text" @confirm="relationClick"></u-select>
	</view>
</template>

<script>
	import { addAppform, getIntroList } from '@/api/common.js'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				form: {
					applicationType: 0,
					areaId: '',
					areaName: '',
					name: '',
					birthday: '',
					gender: '',
					parentName: '',
					relation: '',
					phone: '',
					address: ''
				},
				rules: {
					areaName: [{
						required: true,
						message: '请选择园区',
					}],
					name: [{
						required: true,
						message: '请填写宝宝姓名',
					}],
					phone: [{
							required: true,
							message: '请输入联系电话',
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
						}
					],
					birthday: [{
						required: false,
						message: '请输入宝宝出生日期',
					}],
					gender: [{
						required: false,
						message: '请选择宝宝性别',
					}],
					parentName: [{
						required: false,
						message: '请填写家长姓名',
					}],
					relation: [{
						required: false,
						message: '请选择家长和孩子关系',
					}],
					address: [{
						required: false,
						message: '请输入家庭住址',
					}],
				},
				relationShow: false,
				relationList: [{
						text: '爸爸'
					},
					{
						text: '妈妈'
					},
					{
						text: '爷爷'
					},
					{
						text: '奶奶'
					},
					{
						text: '外公'
					},
					{
						text: '外婆'
					},
					{
						text: '其他'
					},
				],
				
				timeShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				
				radioList: [
					{
						name: '女',
						value: '0'
					},{
						name: '男',
						value: '1'
					}
				],
				
				areaShow: false,
				areaList: [],
				
				url: 'https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/2024/09/921/banner2.png'
			}
		},
		computed: {
			channel() {
				return getApp().globalData.channel;
			},
		},
		onLoad() {
			if (this.channel === 'xybaby') {
				this.url = 'https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/2024/09/921/banner2.png'
			} else {
				this.url = 'https://jinzhiweiye.oss-cn-hangzhou.aliyuncs.com/2024/09/921/banner2.png'
			}
			this.getIntro();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			saveClick() {
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						this.addRecord();
						return;
					}
				});
			},
			
			addRecord() {
				uni.showLoading({})
				if (this.$u.test.isEmpty(this.form.birthday)) {
					this.form.birthday = formatDateByTimestamp(Date.now(), 'yyyy/mm/dd');
				}
				if (this.$u.test.isEmpty(this.form.parentName)) {
					this.form.parentName = this.form.name + '家长';
				}
				if (this.$u.test.isEmpty(this.form.relation)) {
					this.form.relation = '其他';
				}
				addAppform(this.form).then(res => {
					console.log(res);
					uni.hideLoading();
					uni.showModal({
					    title: '报名成功',
					    content: '金职托育通老师会在24小时内回电话，请注意接听，谢谢！',
						showCancel: false,
					    success: function (res) {
							console.log(res);
					        if (res.confirm) {
					            uni.navigateBack({})
					        }
					    }
					});
				})
			},
			
			areaClick(res) {
				console.log(res);
				this.form.areaName = this.areaList[res[0].index].name;
				this.form.areaId = this.areaList[res[0].index].id;
			},
			
			relationClick(res) {
				console.log(res)
				this.form.relation = this.relationList[res[0].index].text;
			},
			
			confirmTime(res) {
				this.form.birthday = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
			},
			
			getIntro() {
				getIntroList().then(res => {
					this.areaList = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
</style>